<template>
  <!-- 我的挖矿 -->
  <div class="newposLeft">
    <div class="title flexb">
      <div>{{ $t('newpos.myMining') }}</div>
      <div style="padding-top: 25px">&nbsp;</div>
      <div class="reduceBtn"
      v-if="scatter && scatter.identity"
      @click="handleVotesAction">
        {{ $t('newpos.reduceMined') }}
      </div>
      <div class="reduceBtn"
      v-else @click="handleWalletLogin">
        {{ $t('public.signIn') }}
      </div>
    </div>
    <div class="flexb totalVotes">
      <!-- 您的昨日年化收益率 -->
      <div class="votes flexLeft">
        <p class="voteNum">
          <span>{{ $t('newpos.yourEarnings') }}</span>
          <span class="cursorPointer" @click="handleLastProfitsVisible">{{ $t('newpos.detailed') }}</span>
        </p>
        <p class="gold goldColor" v-if="identity">{{Number(pool.annualizedRate).toFixed(2) || '0.00'}}%</p>
        <p class="gold goldColor" v-else>-%</p>
      </div>
      <div class="votes flexRight" style="position: relative">
        <!-- 您的挖矿总量 -->
        <p class="voteNum">
          <span>{{ $t('newpos.yourTotalMining') }}</span>
          <span class="cursorPointer" @click="handleVotesOwnVisible">{{ $t('newpos.detailed') }}</span>
        </p>
        <p v-if="identity">{{toFixed(pool2.stakeCount + pool2.rexCount, 4) || '0.0000'}} <span class="fontsize16">EOS</span></p>
        <p v-else>- EOS</p>
        <template v-if="scatter && scatter.identity">
          <p class="attenuationTip"
            @click="attenuationVisible = true;"
            style="color: #E6A23D;"
            v-if="pool.attenuationStatus === 1">
            ({{ $t('newpos.theWeightToReduce') }}<i class="iconfont icon-huaban"></i>）
          </p>
          <p class="attenuationTip"
            @click="attenuationVisible = true;"
            style="color: #F56C6C;"
            v-else-if="pool.attenuationStatus === 2">
            （{{ $t('newpos.theWeightReduced') }}<i class="iconfont icon-huaban"></i>）
          </p>
        </template>
      </div>
    </div>
    <div class="lastProfit">
      <div class="flexb">
        <div class="votes flexLeft">
          <!-- 昨日节点收益 -->
          <p class="voteNum">
            <span>{{ $t('newpos.yesterdayNodeBenefits') }}</span>
          </p>
          <p class="goldColor gold" v-if="identity">{{pool.nodeIncome || '0.0000'}} <span class="fontsize16">EOS</span></p>
          <p class="goldColor gold" v-else>- EOS</p>
        </div>
        <div class="votes flexRight">
          <!-- 累计节点收益 -->
          <p class="voteNum">
            <span>{{ $t('newpos.accumulatedNodeBenefits') }}</span>
            <span class="cursorPointer" @click="handleIncomeShow">{{ $t('newpos.history') }}</span>
          </p>
          <p v-if="identity">{{pool.accNodeIncome || '0.0000'}} <span class="fontsize16">EOS</span></p>
          <p v-else>- EOS</p>
        </div>
      </div>
      <div class="flexb">
        <!-- 昨日REX收益 -->
        <div class="votes revenue flexLeft">
          <p class="voteNum">{{ $t('newpos.yesterdayRexEarnings') }}</p>
          <p v-if="identity">{{pool.rexIncome || '0.0000'}} <span class="fontsize16">EOS</span></p>
          <p v-else>- EOS</p>
        </div>
        <!-- 累计REX收益 -->
        <div class="votes revenue flexRight">
          <p class="voteNum">{{ $t('newpos.accumulatedRexIncome') }}</p>
          <p v-if="identity">{{pool.accRexIncome || '0.0000'}} <span class="fontsize16">EOS</span></p>
          <p v-else>- EOS</p>
        </div>
      </div>
    </div>
    <div class="tip">
      <p class="flex tip1">
        <span class="tipSpot"></span>
        {{ $t('newpos.myMiningTip1') }}
      </p>
      <p class="flex">
        <span></span>
        {{ $t('newpos.myMiningTip2') }}
      </p>
      <p class="flex">
        <span></span>
        {{ $t('newpos.myMiningTip3') }}
      </p>
    </div>
    <!-- 您的昨日年化收益弹窗 -->
    <el-dialog
      :title="$t('newpos.yourEarnings')"
      class="votesDiaog"
      :close-on-click-modal="false"
      :visible.sync="lastProfitsVisible"
      width="600px">
      <last-profits
      @listenLastProfits="handleLastProfits"
      :pool="pool"
      :ismax="0"
      :lastProfitsVisible="lastProfitsVisible"/>
    </el-dialog>
    <!-- 您的挖矿明细 -->
    <el-dialog
      :title="$t('newpos.yourMiningDetails')"
      class="votesDiaog"
      :close-on-click-modal="false"
      :visible.sync="votesOwnVisible"
      width="600px">
      <votes-own
      :pool="pool2"
      @listenVotesOwn="handleVotesTotal"
      :votesOwnVisible="votesOwnVisible"/>
    </el-dialog>
    <!-- 收益明细（分红明细） -->
    <el-dialog
      :title="$t('newpos.incomeDetails1')"
      class="votesDiaog"
      :close-on-click-modal="false"
      :visible.sync="incomeDetailsVisible"
      width="830px">
      <income-details @listenIncomeDetails="handleIncomeDetails" :incomeDetailsVisible="incomeDetailsVisible"/>
    </el-dialog>
    <!-- 挖矿 -->
    <el-dialog
      class="noBottom"
      :close-on-click-modal="false"
      :visible.sync="votesVisible"
      width="600px">
      <votes
      :detInfo="detInfo"
      :env="env"
      :proxyList="proxyList"
      :eosBalance="eosBalance"
      :rexBalance="rexBalance"
      :canBuyRexNum="canBuyRexNum"
      @listenVotes="handleVotes"
      :scatter="scatter"
      :votesVisible="votesVisible" :status="1"/>
    </el-dialog>
    <!-- 衰减弹窗 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="attenuationVisible"
      width="520px">
      <newpos-attenuation
        :attenuationVisible="attenuationVisible"
        :pool="pool"
        @listenAttenuationVisible="handleAttenuationVisible"/>
    </el-dialog>
  </div>
</template>

<script>
import { toFixed } from '@/utils/validate';
import LastProfits from '../dialog/LastProfits'; // 昨日年化收益弹窗
import VotesOwn from '../dialog/VotesOwn'; // 您的挖矿明细弹窗
import IncomeDetails from '../dialog/IncomeDetails'; // 收益明细弹窗
import Votes from '../dialog/Votes';
import NewposAttenuation from '../dialog/NewposAttenuation';

export default {
  name: 'newposLeft', // 矿池左部分-我的挖矿
  data() {
    return {
      lastProfitsVisible: false, // 昨日年化收益弹窗
      votesOwnVisible: false, // 您的挖矿明细
      incomeDetailsVisible: false, // 收益明细
      votesVisible: false, // 减少挖矿
      attenuationVisible: false, // 矿池衰减
      identity: null,
    }
  },
  components: {
    LastProfits,
    VotesOwn,
    IncomeDetails,
    Votes,
    NewposAttenuation
  },
  props: {
    pool: Object,
    pool2: Object,
    scatter: Object,
    env: String, // 环境变量
    proxyList: Array, // 所有的代理节点名称
    eosBalance: String,
    rexBalance: String,
    canBuyRexNum: String, // rex 可卖
    detInfo: Object,
  },
  watch: {
    '$store.state.app.scatter.identity': {
      handler: function listen() {
        this.identity = this.$store.state.app.scatter.identity;
      },
      deep: true,
    },
  },
  computed: {},
  created() {},
  mounted() {
    this.identity = this.$store.state.app.scatter.identity;
  },
  beforeDestroy() {},
  methods: {
    // 昨日年化收益关闭监听回调
    handleLastProfits() {
    },
    // 收益明细回调
    handleIncomeDetails() {
    },
    // 关闭挖矿总量明细
    handleVotesTotal() {
    },
    // 减少挖矿
    handleVotesAction() {
      const scatter = this.$store.state.app.scatter;
      if (scatter && scatter.by === 'mobileWallet') {
        this.$emit('listenVotes', 'tips');
        return;
      }
      if (scatter && scatter.chain !== 'eos') {
        this.$message.error(this.$t('newpos.switchEosAccount'));
        return;
      }
      this.votesVisible = true;
    },
    // 挖矿弹窗回调事件
    handleVotes(way) {
      if (way === 'back') {
        this.$emit('listenVotes', 'back')
      }
    },
    // 我的节点收益明细
    handleIncomeShow() {
      const chain = this.$store.state.app.scatter.chain;
      if (chain !== 'eos') {
        this.$message.error(this.$t('newpos.switchEosAccount'));
        return;
      }
      if (this.scatter && this.scatter.identity) {
        this.incomeDetailsVisible = true;
        return;
      }
      this.$emit('listenWalletLogin', true);
    },
    // 我的挖矿明细
    handleVotesOwnVisible() {
      const chain = this.$store.state.app.scatter.chain;
      if (chain !== 'eos') {
        this.$message.error(this.$t('newpos.switchEosAccount'));
        return;
      }
      if (this.scatter && this.scatter.identity) {
        this.votesOwnVisible = true;
        return;
      }
      this.$emit('listenWalletLogin', true);
    },
    // 昨日年化收益明细
    handleLastProfitsVisible() {
      const chain = this.$store.state.app.scatter.chain;
      if (chain !== 'eos') {
        this.$message.error(this.$t('newpos.switchEosAccount'));
        return;
      }
      if (this.scatter && this.scatter.identity) {
        this.lastProfitsVisible = true;
        return;
      }
      this.$emit('listenWalletLogin', true);
    },
    // 挖矿衰减回调
    handleAttenuationVisible(type) {
      if (type === 'close') {
        this.$emit('listenVotes', 'back')
        this.attenuationVisible = false;
      }
    },
    // 账户登录命令传递
    handleWalletLogin() {
      this.$emit('listenWalletLogin', true);
    },
    // 数字截取 - 保留小数
    toFixed(num, p) {
      if (!num && num !== 0) {
        return toFixed(0, p);
      }
      return toFixed(num, p);
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@/views/newpos/public.scss';
$color: rgba(255, 255, 255, 0.8);
$colorBlue: #9AB2ED;
$colorGold: #FFC78A;
.flexLeft {
  flex: 1;
}

.flexRight {
  flex: 0.8;
}

.fontsize16 {
  font-size: 16px !important;
  letter-spacing: 0px;
}

.goldColor {
  color: #F5A623 !important;
}

.cursorPointer {
  cursor: pointer;
}

.newposLeft{
  padding: 13px 20px;

  .title {
    color: #333;
    margin-bottom: 30px;
    font-size: 16px;

    .reduceBtn {
      padding: 10px 20px;
      border-radius: 4px;
      color: #F5A623;
      border: 1px solid #F5A623;
      cursor: pointer;
      font-size: 14px;
    }
  }

  .totalVotes {
    padding: 0 0 40px 0;
    border-bottom: 1px solid #e4e7ed;

    .votes {
      .voteNum {
        span:nth-child(1) {
          margin-right: 5px;
          color: #999;
        }

        span:nth-child(2) {
          color: #2E7DEF;
        }
      }

      p:nth-child(2) {
        margin-top: 5px;
        font-size: 20px;
      }
    }
  }

  .lastProfit {
    padding: 30px 0;
    border-bottom: 1px solid #e4e7ed;

    .votes {
      .voteNum {
        color: #999;

        span:nth-child(1) {
          margin-right: 5px;
          color: #999;
        }

        span:nth-child(2) {
          color: #2E7DEF;
        }
      }

      p:nth-child(2) {
        margin-top: 5px;
        font-size: 20px;
      }
    }

    .revenue {
      margin-top: 50px;
    }
  }

  .tip {
    padding-top: 8px;
    color: #999;

    span {
      display: inline-block;
      width: 4px;
      height: 4px;
      background: #999;
      border-radius: 50%;
      margin-right: 10px;
    }

    p {
      line-height: 25px;
    }

    .tip1 {
      position: relative;
      padding-left: 15px;

      .tipSpot {
        position: absolute;
        left: 0;
        top: 9px;
      }
    }
  }
  .attenuationTip {
    position: absolute;
    left: 0;
    bottom: -20px;
    cursor: pointer;

    i {
      display: inline-block;
      vertical-align: middle;
      margin-top: -2px;
      margin-left: 5px;
    }
  }
}

.theme-1B1D27 {
  .newposLeft {
    .goldColor {
      color: $colorGold !important;
    }

    .title, .votes p:nth-child(2), .reduceBtn {
      color: #fff !important;
    }

    .reduceBtn {
      // border-color: $colorBlue !important;
      color: $colorGold !important;
    }

    .voteNum span:nth-child(1), .voteNum, .tip p {
      color: $colorBlue !important;
    }

    .tip p span {
      background: $colorBlue !important;
    }

    .voteNum span:nth-child(2), .votes p.gold {
      color: $colorGold !important;
    }

    .totalVotes, .lastProfit {
      border-color: $borderColor !important;
    }
  }
}

</style>
